<!DOCTYPE html>
<html>
<head>
<title>Place Autocomplete Address Form</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="script-tags-for-development.js"></script>
<script>
angular.module('myApp', ['ngMap']).controller('MyCtrl', function(NgMap) {
  var vm = this;
  vm.types = "['establishment']";
  vm.placeChanged = function() {
    vm.place = this.getPlace();
    console.log('location', vm.place.geometry.location);
    vm.map.setCenter(vm.place.geometry.location);
  }
  NgMap.getMap().then(function(map) {
    vm.map = map;
  });
 });
</script>
</head>

<body ng-app="myApp" ng-controller="MyCtrl as vm">
  Auto Complete Type:
  <select ng-model="vm.types">
    <option value="['geocode']">Geodode</option>
    <option value="['establishment']">Establishment</option>
    <option value="['address']">Address</option>
  </select><br/>

  Enter an address: <br/>
  <input places-auto-complete size=80
    ng-model="vm.address"
    component-restrictions="{country:'us'}"
    types="{{types}}"
    on-place-changed="vm.placeChanged()" /> <br/>
  <div ng-show="vm.place">
    Address = {{vm.place.formatted_address}} <br/>
    Location: {{vm.place.geometry.location}}<br/>
  </div>
  address : {{vm.address}}
  <ng-map></ng-map>
</body>
</html>
